<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>02 - Color Component with refs</title>
</head>
<body>
<div id="react-container"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    const { Component } = React
    const { render } = ReactDOM

    class AddColorForm extends Component {
      constructor(props) {
        super(props)
        this.submit = this.submit.bind(this)
      }
      submit(e) {
        const { _title, _color } = this.refs
        e.preventDefault();
        this.props.onNewColor(_title.value, _color.value)
        _title.value = '';
        _color.value = '#000000';
        _title.focus();
      }
      render() {
          return (
              <form onSubmit={this.submit}>
                  <input ref="_title"
                         type="text"
                         placeholder="color title..." required/>
                  <input ref="_color"
                         type="color" required/>
                  <button>ADD</button>
              </form>
          )
      }
    }

    render(
      <AddColorForm onNewColor={
          (title, color) => {
              console.log(`TODO: add ${title} and ${color} to the list`)
              console.log(`TODO: render UI with new Color`)
          }}
      />,
      document.getElementById('react-container')
    )

</script>

</body>
</html>
